<!DOCTYPE html>
<html>
    <head>
        <style type="text/css"> 
            #div{
                width:200px;
                height:200px;
                color:white;
                background-color:blue;
                margin:0 auto;/*父盒子在浏览器中水平居中*/
                }
            #div .p{
                width:50px;
                height:50px;
                color:black;
                background-color: yellow;
                /*
                margin: 50px 10px 50px 10px;    //上、右、下、左
                margin: 50px 10px;              //上=下、右=左
                nargin: 50px 10px 50px;         //上、右、下（左=右）

                margin: 50px;                   //上=右=下=左
                */
                margin:0 auto;                  /*设置水平居中*/                  
            }
        </style>
    </head>
    <body>
        <div id="div">父盒子
            <p class="p">子盒子</p>
        </div>
    </body>
</html>